<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" ntegrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <title>socket</title>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <style>
        html,body{
            height:100%;
        }
        .con{
            margin: auto;
            width: 800px;
            height: 500px;
            position: absolute;
            left: 0;
            right: 0;
            top: 100px;
        }
         #textarea{
             height:500px;
             width: 800px;
             background-color:rgb(255, 255, 255,0.6); 
             resize: none;
             color: rgb(15, 15, 15); ;
             font-size: 18px;
             padding: 10px;
             /* box-shadow:1px 1px 1px saddlebrown; */
         }
         #user{
             width: 120px;
             height: 35px; 
              text-align: center;
             } 
         #msg{
           width: 550px;
           height: 30px;
         }
        input{ 
            border-radius: 18px;
            border: 1px solid #cccccc;
            outline: none;
            padding-left: 10px;
            padding-right: 10px;
            font-size: 20px;
             
        }
        input:focus{
              box-shadow: 0px 0px 3px 3px rgb(60,255,11);
        }
        button{
            width: 75px;
            height: 30px;
            border: 1px solid #cccccc;
            border-radius: 18px;
            outline: none;
            box-shadow: 2px 2px 2px 2px #999999 ;
        }
        button:active{
            box-shadow: 2px 2px 2px 2px #999999 inset;
        }
        img{
            height: 30px;
            width: 30px;
            border-radius: 50%;
            vertical-align: middle;
        }
    </style>
</head>
<body>
   <h1>console</h1>
    <div class="con">
        <div id='textarea' style="height:800px;overflow:auto;">

        </div>
         <span id="msg_end" style="overflow:hidden"></span>
    <br>
    <input type="text" id="user" name="user">
    <input type="text" id="msg" name="msg">
    <button>发送</button>
    </div>
</body>
    <script>
     var hid=document.getElementById('msg_end');//隐藏在消息框下面的元素
    var mai=document.getElementById('textarea');
        const ws = new WebSocket('ws://127.0.0.1:5678/') //开启WebSocket服务的IP地址
        var textArea,user,msg,bn;
        var strs=""; 
        ws.onopen=()=>{
            console.log('服务器已连接')
        }
        ws.onmessage=(msg)=>{ 
            //   console.log( msg.data)
            if(msg.data=='不可以说脏话哦'){
                alert(msg.data)  
            }else{ 
                let arr=msg.data.split("&")
                var obj={} 
                var divobj = document.getElementById("textarea")
                //strs+='<div> <img src="'+arr[2]+'" >'+arr[0]+'：'+arr[1]+'</div>'
                strs='<div> '+arr[0]+'</div>'
                divobj.innerHTML+=strs
                hid.scrollIntoView(true);
               mai.scrollTop=mai.scrollHeight;
            } 
        }
        init();
        function init(){
            textArea=document.querySelector("textarea");
            user=document.querySelector("#user");
            msg=document.querySelector("#msg");
            bn=document.querySelector("button");
            bn.addEventListener("click",clickHandler);
            document.addEventListener("keyup",clickHandler);
        }  
        function clickHandler(e){
            if(e.type==="keyup" && e.keyCode!==13) return;
            if(user.value.trim().length===0)  return ;
            if(msg.value.trim().length===0)   return;
            // const str="user="+user.value+"&msg="+msg.value;
            const str=user.value+"&"+msg.value;

            ws.send(wordfilter(str))  //向服务器发送数据
            msg.value="";
        }
        //时间距
        function time(){
            times=document.getElementById("times");
            var date=new Date();
            var Year=date.getFullYear();
            var month=date.getMonth()+1;
            var day=date.getDate();
            var hour=date.getHours();
            var min= date.getMinutes();
            var sec= date.getSeconds();
          //Year+"-"+month+"-"+day+"-"+hour+":"+min+":"+sec;
          return times=hour+":"+min+":"+sec
        }
        //脏话过滤
        var arrMg = [ ];//包含脏话的字段数组，网上应该有JSON
        function wordfilter(str){
            console.log(str,'888')
            for (var i = 0; i < arrMg.length; i++) { 
                var r = new RegExp(arrMg[i], "ig"); 
                console.log(r,'666')
                str = str.replace(r, "*");
            }
            return str
        }
        ws.onclose=()=>{
            console.log('服务器关闭')
        }    
    </script>
</html>
